<template>
  <!-- 巡检点位弹框 -->
  <div :class="'patrol-point-wrap dialog-wrap ' +($Ctl.isCs(true)?'gradation-bg':'bg')">
    <div class="dialog-title">{{ baseInfo.name }}</div>
    <div class="overview" v-show="!showDetail">
      <div class="patrol-point-location">{{ baseInfo.address }}</div>
      <div class="show-content">
        <div class="program-wrap">
          <!-- 文案 -->
          <div class="info-content">
            <p
              class="value-text"
              :class="mapStatusColor(baseInfo.status)"
            >{{ baseInfo.status == 1 ? '合格' : (baseInfo.status == 2 ? '不合格' : '未完成') }}</p>
            <p class="content-desc" v-show="baseInfo.status != 3">{{ baseInfo.time }}巡检完成</p>
          </div>
          <!-- 图 -->
          <div class="patrol-point-img-wrap">
            <img
              v-if="baseInfo.pic"
              class="patrol-point-img"
              :src="baseInfo.pic.split(',')[0]"
              @click="onPreview(baseInfo.pic.split(','))"
              style="cursor:pointer;"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="details" v-show="showDetail">
      <table>
        <thead>
          <tr>
            <th width="60px">序号</th>
            <th>检查内容</th>
            <th width="130px">结果</th>
          </tr>
        </thead>
      </table>
      <div class="tbody-wrap">
        <table>
          <tbody>
            <tr v-for="(item, i) in baseInfo.contentResults" :key="i">
              <td width="60px" class="td-index">{{i+1}}</td>
              <td>
                <div style="word-break:break-all;">{{ item.content }}</div>
              </td>
              <td width="130px">
                <div v-if="item.result!=3" :class="item.result == 1?'color-3':'color-1'" style="word-break:break-all;">
                  <template v-if="item.checkType==1">{{item.result==1?'':'不'}}合格</template>
                  <template
                    v-else-if="item.checkType==2"
                  >{{(item.options.filter(n=>{ return n.lable==item.contentResult })[0]||{option:''}).option}}</template>
                  <template v-else-if="item.checkType==3">{{item.contentResult||'-'}}{{item.options[2].option}}</template>
                  <template v-else-if="item.checkType==4">
                    <img
                      v-if="item.contentResult && (item.contentResult.split(',')[0].substr(item.contentResult.split(',')[0].length - 3) == 'png' || item.contentResult.split(',')[0].substr(item.contentResult.split(',')[0].length - 4) == 'jpeg' || item.contentResult.split(',')[0].substr(item.contentResult.split(',')[0].length - 3) == 'gif' || item.contentResult.split(',')[0].substr(item.contentResult.split(',')[0].length - 3) == 'jpg' || item.contentResult.split(',')[0].substr(item.contentResult.split(',')[0].length - 3) == 'bmp' || item.contentResult.split(',')[0].substr(item.contentResult.split(',')[0].length - 3) == 'pic')"
                      :src="item.contentResult.split(',')[0]"
                      style="width:60px;height:60px;cursor:pointer;"
                      @click="onPreview(item.contentResult.split(','))"
                    />
                    <img v-else :src="takePhoto" alt="" style="width:60px;height:60px;cursor:pointer;" @click="getImgVideoDetail({item:item.contentResult.split(',')[0]})">
                  </template>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 底部 -->
    <div class="card-bottom">
      <div class="patrol-point-state">
        <img class="person-header-img" :src="personHeadImg || defaultUserHead" />
        巡检员{{ personName }}
      </div>
      <div class="features-list">
        <el-tooltip class="item" effect="dark" content="呼叫中心">
          <div class="features-item iconfont icondapingtubiao_dianhua" @click="jumpCellCenter">
            <!--电话-->
          </div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="详细信息">
          <div class="features-item iconfont icondapingtubiao_mingxi" v-show="!showDetail" @click="openDetails">
            <!--明细-->
          </div>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="收起">
          <div class="features-item iconfont icondapingtubiao_shouqi" v-show="showDetail" @click="closeDetails">
            <!--收起-->
          </div>
        </el-tooltip>
      </div>
    </div>

    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" :on-switch="switchPic" />
    <el-dialog :visible.sync="dialogVisible" width="30vw" class="hereby-certify" append-to-body title="拍照检查">
        <videoImgDetail ref="mychild" :videoImgArr='videoImgArr' style="width:100%;"></videoImgDetail>
    </el-dialog>
  </div>
</template>
<script>
import { getInspectMarkDetail } from '@/api/markInfo3d'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import videoImgDetail from '@/components/DialogCards/videoImgDetail/main'

export default {
  components: { ElImageViewer, videoImgDetail },
  props: {
    parames: {
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      showDetail: false,
      defaultUserHead: require('../../../assets/images/default/userHead.png'),
      personHeadImg: '',
      personName: '',
      baseInfo: {},
      showViewer: false,
      srcList: [],
      takePhoto: require('../../../assets/images/videoImgDetail/video_detail.png'),
      dialogVisible: false, // 弹窗
      videoImgArr: {},
    }
  },
  created() {
    this.getInfo()
  },
  watch:{
    dialogVisible(newVal){
      if(!newVal){
          this.$refs.mychild.stopVideo()
      }
    }
  },
  methods: {
    onPreview(imgs) {
      this.srcList = imgs
      this.showViewer = true
    },
    getImgVideoDetail(item){
      let that = this
      that.videoImgArr = item
      that.dialogVisible = true
    },
    closeViewer() {
      this.showViewer = false
    },
    switchPic() {},
    mapStatusColor(type) {
      let Map = {
        0: 'color-1',
        1: 'color-3',
        2: 'color-2',
      }

      return Map[type] || ''
    },
    getInfo() {
      let that = this
      that.$Ctl.loading(1, 10000)
      getInspectMarkDetail({
        id: that.parames.id,
        dType:
          that.$store.state.currentMapType == 4
            ? 2
            : localStorage.getItem('ilinkBs_currentMapType'),
        taskId: this.$store.state.curInspectId,
      }).then((res) => {
        if (res.status === 200) {
          that.baseInfo = res.data.data
          that.personHeadImg = res.data.data.headUrl
          that.personName = res.data.data.accountName
          that.mapLocation = res.data.mapLocation
          that.type = res.data.type
        }
        that.$nextTick(() => {
          that.$Ctl.loading(0)
        })
      })
    },
    openDetails() {
      this.showDetail = true
    },
    closeDetails() {
      this.showDetail = false
    },
    // 跳转呼叫中心
    jumpCellCenter() {
      this.$Ctl.enterChild('CellCenter', {
        orgId: this.baseInfo.orgId,
        userId: this.baseInfo.account,
        userName: this.baseInfo.accountName,
      })
    },
  },
}
</script>
<style lang="scss">
.patrol-point-wrap {
  .patrol-point-location {
    margin-top: 20px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #a3bedd;
    font-size: 20px;
  }
  .show-content {
    margin: 35px auto;
    width: 520px;
    height: 180px;
    background: url(../../../assets/images/dialogCards/content-bg.png) center
      center no-repeat;
    background-size: cover;
    .program-wrap {
      display: flex;
      height: 100%;
      align-items: center;
      .info-content {
        padding-top: 37px;
        width: 50%;
        height: 100%;
        text-align: center;
        .value-text {
          height: 66px;
          line-height: 66px;
          font-size: 46px;
          .units-text {
            font-size: 20px;
          }
          &.color-2 {
            line-height: 108px;
            height: 108px;
          }
        }
        .content-desc {
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-size: 18px;
        }
      }
      .patrol-point-img-wrap {
        width: 50%;
        height: 100%;
        .patrol-point-img {
          margin: 0 auto;
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .details {
    margin-top: 20px;
    margin-bottom: 35px;
    height: 245px;
    table {
      width: 100%;
      font-size: 18px;
      th {
        color: #a3bedd;
        text-align: left;
      }
      td {
        padding: 5px 0;
        color: #fff;
      }
    }
    .tbody-wrap {
      height: 214px;
      overflow-y: auto;
    }
    .td-index {
      padding-left: 10px;
    }
  }
  .card-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    .patrol-point-state {
      display: flex;
      line-height: 38px;
      color: #3779e2;
      font-size: 20px;
      .person-header-img {
        margin-right: 15px;
        border-radius: 50%;
        width: 38px;
        height: 38px;
      }
    }
    .features-list {
      display: flex;
      .features-item {
        margin-left: 10px;
        width: 38px;
        height: 38px;
        line-height: 38px;
        color: #4699ff;
        text-align: center;
        font-size: 34px;
        cursor: pointer;
      }
    }
  }
}
</style>
